<template>
  <div
    style="height: 100%; width: 100%"
    v-loading="loading"
    element-loading-text="数据加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="params-form">
      <el-form :inline="true" :model="formParams" class="demo-form-inline">
        <el-form-item label="开始日期 :">
          <el-date-picker
            v-model="formParams.beginTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="-">
          <el-date-picker
            v-model="formParams.endTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getList"
            >查询</el-button
          >
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" size="small" @click="gotoGanttChart">查看甘特图</el-button>
        </el-form-item>-->
        <el-form-item>
          <el-button
            type="primary"
            style="margin-left: 40px"
            @click="
              loadPagePoint();
              $refs.filightPreditDialogRef.show();
            "
            size="small"
            >区域轨迹预测</el-button
          >
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="$refs.filightAreaDialogRef.show()"
            >区域管理</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            :loading="drawAreaLoading"
            @click="drawArea"
            >显示所有区域</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <filight-predic-dialog
      ref="filightPreditDialogRef"
      @success="drawData"
      @load="loadPoints"
    ></filight-predic-dialog>
    <filight-area-dialog ref="filightAreaDialogRef"></filight-area-dialog>
    <!-- 左侧树型筛选 -->
    <div class="params-tree" :class="{ active: isActive }">
      <div class="params-title">筛选</div>
      <el-tree
        ref="paramTree"
        :data="treeData"
        show-checkbox
        node-key="id"
        :default-checked-keys="checkIds"
        :default-expanded-keys="expandedIds"
        :props="defaultProps"
      ></el-tree>
      <div class="param-bottom-btn">
        <div @click="clearTree" class="btn-cancer">取消</div>
        <div @click="getList" class="btn-comfirm">确定</div>
      </div>
      <div
        class="btn-visible"
        :class="{ active: isActive }"
        @click="filtrateBtn()"
      ></div>
    </div>
    <!-- 点击页面上的船或者飞机 显示详情-->
    <div class="point-detail" :class="{ active: !pointDetailVisible }">
      <div class="params-title">
        详情信息
        <i class="el-icon-close" @click="closepointDetail"></i>
      </div>
      <div class="point-detail-container">
        <div class="point-name">
          <div>{{ pointDetail.name }}</div>
          <div class="detail-text-btn" @click="showFormation(pointDetail.uuid)">
            查看编队信息 >
          </div>
        </div>
        <div class="point-line"></div>
        <div class="point-bottom">
          <div class="text-title space-item">基本信息</div>
          <el-descriptions :column="1" size="mini" border>
            <el-descriptions-item label="装备类别">{{
              pointDetail.typeChi
            }}</el-descriptions-item>
            <el-descriptions-item label="装备描述">{{
              pointDetail.detail
            }}</el-descriptions-item>
            <el-descriptions-item label="UUID">{{
              pointDetail.uuid
            }}</el-descriptions-item>
            <el-descriptions-item label="航向角">{{
              pointDetail.track
            }}</el-descriptions-item>
            <el-descriptions-item label="时间">{{
              pointDetail.time
            }}</el-descriptions-item>
            <el-descriptions-item label="经度">{{
              pointDetail.longitude.toFixed(3)
            }}</el-descriptions-item>
            <el-descriptions-item label="纬度">{{
              pointDetail.latitude.toFixed(3)
            }}</el-descriptions-item>
          </el-descriptions>
          <div class="text-title space-item">其他属性</div>
          <el-descriptions :column="1" size="mini" border>
            <el-descriptions-item
              :label="value"
              v-for="(key, value) in pointDetail.attr"
              :key="key"
              >{{ key }}</el-descriptions-item
            >
          </el-descriptions>
          <div
            class="space-item"
            style="display: flex; justify-content: space-between"
            v-show="pointDetail.timeline.length"
          >
            <div class="text-title">时间线信息</div>
            <div
              class="detail-text-btn"
              v-show="pointDetail.categories == 'ship'"
              @click="
                handlePredict(
                  pointDetail.type,
                  pointDetail.uuid,
                  pointDetail.categories,
                  pointDetail.timeline[0].flightLine
                )
              "
            >
              预测
            </div>
          </div>
          <div
            class="point-detail-timeline"
            v-show="pointDetail.timeline.length"
          >
            <div
              v-for="item in pointDetail.timeline"
              :key="item.id"
              class="point-detail-timeline-item"
            >
              <div class="circle"></div>
              <div class="detail-flex">
                <div>{{ item.time }}</div>
                <div
                  class="detail-text-btn"
                  @click="
                    showSingleLine(
                      pointDetail.type,
                      pointDetail.uuid,
                      pointDetail.categories,
                      item.flightLine
                    )
                  "
                >
                  查看分段航迹
                  <i class="el-icon-view"></i>
                </div>
              </div>
              <el-descriptions
                :column="1"
                class="space-item"
                size="mini"
                border
              >
                <el-descriptions-item label="航线">{{
                  item.flightLine
                }}</el-descriptions-item>
                <el-descriptions-item label="经度">{{
                  item.longitude.toFixed(3)
                }}</el-descriptions-item>
                <el-descriptions-item label="纬度">{{
                  item.latitude.toFixed(3)
                }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
      </div>
      <div class="operation-btn" v-show="pointDetail.timeline.length">
        <div class="operation-item" v-show="pointDetail.categories == 'ship'">
          <div>查看航海日志</div>
          <el-switch
            v-model="logBookVisible"
            @change="showlogbook(pointDetail.uuid)"
          ></el-switch>
        </div>
        <div class="operation-item" v-show="pointDetail.categories == 'ship'">
          <div>查看轨迹</div>
          <el-switch
            v-model="trackVisible"
            @change="
              showTrack(
                pointDetail.type,
                pointDetail.uuid,
                pointDetail.categories
              )
            "
          ></el-switch>
        </div>
      </div>
    </div>
    <!-- 点击查看编队信息 显示详情-->
    <div class="point-detail" :class="{ active: !formationListVisible }">
      <div class="params-title">
        <span @click="formationBacktoPoint" style="cursor: pointer"
          >< 编队信息</span
        >
        <i class="el-icon-close" @click="formationListVisible = false"></i>
      </div>
      <div class="formation-list">
        <div
          v-for="(item, index) in formationList"
          @click="showFormationLine(item)"
          class="formation-item"
          :key="index"
        >
          <div class="formation-item-title">
            {{ item.shipnamechi }} ({{ item.shipName }})
          </div>
          <span>类型：{{ item.shiptypechi }}</span>
          <!--<span>mmsi：{{item.mmsi}}</span>
          <span>imo：{{item.imo}}</span>-->
        </div>
      </div>
    </div>
    <!-- 右侧-基地信息 -->
    <div class="point-detail" :class="{ active: !basePointsVisible }">
      <div class="params-title">
        <span>{{ basePointDetail.name }} - 基地信息</span>
        <i class="el-icon-close" @click="basePointsVisible = false"></i>
      </div>
      <div
        class="point-bottom point-detail-container"
        style="height: calc(100% - 62px)"
      >
        <el-descriptions :column="1" size="mini" border>
          <el-descriptions-item label="国家">{{
            basePointDetail.country
          }}</el-descriptions-item>
          <el-descriptions-item label="面积">{{
            basePointDetail.landArea
          }}</el-descriptions-item>
          <el-descriptions-item label="角度">{{
            basePointDetail.directionAngle
          }}</el-descriptions-item>
          <el-descriptions-item label="经度">{{
            basePointDetail.longitude.toFixed(3)
          }}</el-descriptions-item>
          <el-descriptions-item label="纬度">{{
            basePointDetail.latitude.toFixed(3)
          }}</el-descriptions-item>
        </el-descriptions>
        <div v-show="basePointDetail.baseEquipmentList.length">
          <div class="text-title space-item">基地装备列表</div>
          <div v-for="item in basePointDetail.baseEquipmentList" :key="item.id">
            <div style="font-size: 14px">{{ item.time }}</div>
            <el-descriptions
              :column="1"
              style="margin: 5px 0px 10px 0px"
              size="mini"
              border
            >
              <el-descriptions-item label="编号">{{
                item.equipmentNo
              }}</el-descriptions-item>
              <el-descriptions-item label="来源">{{
                item.source
              }}</el-descriptions-item>
              <el-descriptions-item label="发现时间">{{
                item.discoveryTime.substr(0, 10)
              }}</el-descriptions-item>
              <el-descriptions-item label="经度">{{
                item.longitude.toFixed(3)
              }}</el-descriptions-item>
              <el-descriptions-item label="纬度">{{
                item.latitude.toFixed(3)
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
    </div>

    <div class="lookbook" :class="{ active: !timelineVisible }">
      <div class="text-title" style="margin: 16px 0px">航行日志信息</div>
      <div class="lookbook-timeline">
        <div
          v-for="item in timelineList"
          :key="item.id"
          :id="item.time"
          class="lookbook-item"
        >
          <div class="lookbook-title">
            {{ item.time }} {{ item.boatasName }}
          </div>
          <div class="lookbook-content">
            <el-descriptions :column="2">
              <el-descriptions-item label="事件类型">{{
                item.boatasType
              }}</el-descriptions-item>
              <el-descriptions-item label="位置">{{
                item.region
              }}</el-descriptions-item>
            </el-descriptions>
            <div class="lookbook-body">{{ item.detail }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 查看航海日志 -->
    <div class="lookbook" :class="{ active: !lookbooktimelineVisible }">
      <div class="text-title" style="margin: 16px 0px">航海日志</div>
      <div class="lookbook-timeline" @mousedown="startDrag" ref="lookbookRef">
        <div
          @click="showRedlookbookLine(item.time)"
          v-for="item in lookbooktimelineList"
          :key="item.id"
          :id="item.time"
          class="lookbook-item"
        >
          <div class="lookbook-title">
            {{ item.time }} {{ item.boatasName }}
          </div>
          <div class="lookbook-content">
            <el-descriptions :column="2">
              <el-descriptions-item label="事件类型">{{
                item.boatasType
              }}</el-descriptions-item>
              <el-descriptions-item label="位置">{{
                item.region
              }}</el-descriptions-item>
            </el-descriptions>
            <div>{{ item.detailCn }}</div>
          </div>
        </div>
      </div>
    </div>

    <div
      ref="lineDetail"
      class="linepoint-detais"
      v-show="linepointDetailVisible"
    >
      <div class="linepoint-title">{{ linepointDetail.time }}</div>
      <div class="linepoint-content">
        <el-descriptions :column="1">
          <el-descriptions-item label="经度">{{
            linepointDetail.longitude
          }}</el-descriptions-item>
          <el-descriptions-item label="纬度">{{
            linepointDetail.latitude
          }}</el-descriptions-item>
        </el-descriptions>
        <div class="linepoint-body">{{ linepointDetail.detail }}</div>
      </div>
      <!-- <p>经度：{{ linepointDetail.longitude }}</p>
      <p>纬度：{{ linepointDetail.latitude }}</p>
      <p>{{ linepointDetail.detail }}</p>-->
    </div>
  </div>
</template>

<script>
import blueShip from "./../assets/imgs/navigation-log/blueShip.png";
import jidi from "./../assets/imgs/navigation-log/jidi.png";
import yellowShip from "./../assets/imgs/navigation-log/yellow-ship.png";
import predictship from "./../assets/imgs/navigation-log/predictship.png";
import blueAircraft from "./../assets/imgs/navigation-log/blueaircraft.png";
import yellowCircle from "./../assets/imgs/navigation-log/yellow-circle.png";
import redCircle from "./../assets/imgs/navigation-log/hong-circle.png";
import whiteCircle from "./../assets/imgs/navigation-log/white-circle.png";
import pointBg from "./../assets/imgs/navigation-log/xuanzhong.png";
import * as request from "../http/request.js";
import * as Cesium from "cesium/Cesium";
import "cesium/Widgets/widgets.css";
import filightPredicDialog from "./filight-predic-dialog.vue";
import filightAreaDialog from "./filight-area-dialog.vue";
import DrawMap from "@/map/index.js";

export default {
  components: { filightPredicDialog, filightAreaDialog },
  name: "dataAnalysis",
  data() {
    return {
      drawAreaLoading: false,
      value1: "",
      loading: false,
      viewer: null,
      drawMap: {},
      _self: null,
      //参数
      baseData: {
        regionList: {
          1: "南海",
          2: "台海",
        },
        typeList: {
          1: "类型1",
          2: "类型2",
        },
        equipList: {
          1: "p-8a",
          2: "aaa",
        },
      },
      formParams: {
        catalogIds: [],
        beginTime: "",
        endTime: "",
      },
      treeData: [
        {
          id: 1,
          label: "数据来源",
          children: [
            {
              id: 5,
              label: "开源轨迹",
            },
            {
              id: 6,
              label: "航行日志",
            },
          ],
        },
        {
          id: 2,
          label: "区域",
          children: [
            {
              id: 7,
              label: "东海",
            },
            {
              id: 8,
              label: "南海",
            },
          ],
        },
        {
          id: 3,
          label: "军事基地",
          children: [
            {
              id: 9,
              label: "冲绳基地",
            },
            {
              id: 10,
              label: "佐世保基地",
            },
            {
              id: 11,
              label: "横须贺基地",
            },
            {
              id: 12,
              label: "关岛军事基地",
            },
          ],
        },
        {
          id: 4,
          label: "船舰类型",
          children: [
            {
              id: 13,
              label: "保障辅助舰艇",
            },
            {
              id: 14,
              label: "巡洋舰",
            },
            {
              id: 15,
              label: "油船",
            },
            {
              id: 16,
              label: "指挥舰",
            },
            {
              id: 17,
              label: "护卫舰",
            },
            {
              id: 18,
              label: "测量船",
            },
            {
              id: 19,
              label: "驱逐舰",
            },
            {
              id: 20,
              label: "两栖作战舰艇",
            },
            {
              id: 21,
              label: "救援舰",
            },
            {
              id: 22,
              label: "拖船",
            },
          ],
        },
      ],
      checkIds: [14, 3], //默认选中
      expandedIds: [], //'默认展开'
      defaultProps: {
        children: "children",
        label: "label",
      },
      //右上角 船舰表格列表
      equipList: [],
      currentAnalysisPage: 1,
      pageSize: 4,
      /** 总数据 */
      pointData: [
        {
          latitude: 35.758531,
          type: "opendata",
          categories: "aircraft",
          typeChi: "运输机",
          uuid: "AE4EED",
          name: "运输机",
          timeline: [
            {
              latitude: 35.758531,
              flightLine: "AE4EED_2023-06-21_3",
              id: 1,
              time: "2023-06-21 16:47:37",
              uuid: "AE4EED",
              longitude: 139.34537,
            },
          ],
          id: 1,
          iconUrl: "./../assets/imgs/navigation-log/blueship.png",
          time: "2023-06-21 16:47:37",
          detail: "保障",
          track: -1.0,
          attr: {
            注册号: "10-0054",
            呼号: "10-0054",
            飞机型号: "Boeing CV-22B Osprey",
            速度: 10.75,
            飞机型号简码: "V22",
            国家编码: "US",
            高度: 0.0,
          },
          longitude: 139.34537,
        },
        {
          latitude: 13.75943,
          type: "opendata",
          categories: "aircraft",
          typeChi: "保障辅助舰艇",
          uuid: "367837000",
          speed: 5.8000001900000008,
          name: "能力号海洋监视船",
          flightLine: "367837000_1687866233",
          timeline: [
            {
              latitude: 13.75943,
              flightLine: "367837000_1687866233",
              id: 85002,
              time: "2023-06-27 19:43:53",
              uuid: "367837000",
              longitude: 113.77608,
            },
            {
              latitude: 32.597633,
              flightLine: "367837000_1686226823",
              id: 91894,
              time: "2023-06-15 01:11:10",
              uuid: "367837000",
              longitude: 142.95253,
            },
          ],
          id: 85002,
          iconUrl: "./../assets/imgs/navigation-log/blueship.png",
          time: "2023-06-27 19:43:53",
          detail: "保障",
          track: 25.2000008,
          longitude: 113.77608,
        },
        {
          latitude: 27.54896,
          name: "boatssn793",
          timeline: [],
          categories: "ship",
          id: 99,
          iconUrl: "./../assets/imgs/navigation-log/blueship.png",
          time: "2023-11-29 00:00:00",
          type: "logbook",
          typeChi: "",
          track: 0,
          attr: {
            航速: "  15 knots (surfaced)            30+ knots (submerged)",
            总长: "  377 feet",
            建造者:
              "  General Dynamics Electric Boat Division Co., Groton, CT.",
            龙骨安放时间: "  July 8, 2017",
            特种作战: "  - Dry Deck Shelter  - Advanced SEAL Delivery System",
            排水量:
              "  7150 tons (surfaced)                       7800 tons (submerged)",
            推进系统: "  1 S9G PWR",
            船员: "  113 officers and men",
            母港: "  Groton, CT.",
            吃水深度: "  34 feet",
            装备: " for MK 48 ADCAP  - Advanced Mobile Mines  - Unmanned Undersea Vehicles",
            投产时间: "  May 28, 2022",
            船宽: "  32 feet",
            深度: " 800+ feet (operational)approx. 1200 feet (safe depth)approx. 1800 feet (crash depth)",
            命名日期: "  October 5, 2019",
          },
          uuid: 99,
          longitude: 109.98669,
        },
      ],
      /** 基地数据 */
      basePointsData: [
        {
          baseInfo: {
            country: "日本",
            image: null,
            latitude: 26.0,
            name: "冲绳基地",
            landArea: null,
            id: 10,
            type: "ABase",
            longitude: 127.0,
            directionAngle: null,
            height: null,
          },
          baseEquipmentList: [
            {
              id: 23,
              name: "",
              equipmentType: "",
              equipmentNo: "0",
              type: "",
              count: 1,
              source: "卫星图像分析系统",
              sourceDescript:
                "guandao19发现B-52类型飞行器1架,经纬度：144.92599056975774,13.583088916768768",
              lon: "144.92599056975774",
              longitude: 144.92599056975774,
              lat: "13.583088916768768",
              latitude: 13.583088916768768,
              baseId: 10,
              sourceName: "guandao19",
              discoveryTime: "2022-03-31T16:00:00.000+00:00",
            },
            {
              id: 24,
              name: "",
              equipmentType: "",
              equipmentNo: "0",
              type: "",
              count: 1,
              source: "卫星图像分析系统",
              sourceDescript:
                "chongsheng18发现B-52类型飞行器2架,经纬度分别是：127.75816024281393,26.359053306921584、127.76301842691113,26.358180879592588",
              lon: "127.75816024281393",
              longitude: 127.75816024281393,
              lat: "26.359053306921584",
              latitude: 26.359053306921584,
              baseId: 10,
              sourceName: "chongsheng18",
              discoveryTime: "2022-03-31T16:00:00.000+00:00",
            },
            {
              id: 25,
              name: "",
              equipmentType: "",
              equipmentNo: "1",
              type: "",
              count: 1,
              source: "卫星图像分析系统",
              sourceDescript:
                "chongsheng18发现B-52类型飞行器2架,经纬度分别是：127.75816024281393,26.359053306921584、127.76301842691113,26.358180879592588",
              lon: "127.75816024281393",
              longitude: 127.75816024281393,
              lat: "26.359053306921584",
              latitude: 26.359053306921584,
              baseId: 10,
              sourceName: "chongsheng18",
              discoveryTime: "2022-03-31T16:00:00.000+00:00",
            },
          ],
        },
        {
          baseInfo: {
            country: "日本",
            image: null,
            latitude: 35.0,
            name: "横须贺",
            landArea: null,
            id: 11,
            type: "ABase",
            longitude: 139.0,
            directionAngle: null,
            height: null,
          },
          baseEquipmentList: [
            {
              id: 11,
              name: "横须和",
              equipmentType: "",
              equipmentNo: "0",
              type: "",
              count: 1,
              source: "卫星图像分析系统",
              sourceDescript:
                "横须和发现quzhujian类型船4艘,经纬度分别是：139.63455945253372,35.30329406261444、139.6627226471901,35.299348533153534、139.66338247060776,35.2938312292099、139.66262876987457,35.28901398181915",
              lon: "139.63455945253372",
              longitude: 139.63455945253372,
              lat: "35.30329406261444",
              latitude: 35.30329406261444,
              baseId: 11,
              sourceName: "横须和",
              discoveryTime: "2022-03-31T16:00:00.000+00:00",
            },
            {
              id: 12,
              name: "横须和",
              equipmentType: "",
              equipmentNo: "1",
              type: "",
              count: 1,
              source: "卫星图像分析系统",
              sourceDescript:
                "横须和发现quzhujian类型船4艘,经纬度分别是：139.63455945253372,35.30329406261444、139.6627226471901,35.299348533153534、139.66338247060776,35.2938312292099、139.66262876987457,35.28901398181915",
              lon: "139.63455945253372",
              longitude: 139.63455945253372,
              lat: "35.30329406261444",
              latitude: 35.30329406261444,
              baseId: 11,
              sourceName: "横须和",
              discoveryTime: "2022-03-31T16:00:00.000+00:00",
            },
            {
              id: 13,
              name: "横须和",
              equipmentType: "",
              equipmentNo: "2",
              type: "",
              count: 1,
              source: "卫星图像分析系统",
              sourceDescript:
                "横须和发现quzhujian类型船4艘,经纬度分别是：139.63455945253372,35.30329406261444、139.6627226471901,35.299348533153534、139.66338247060776,35.2938312292099、139.66262876987457,35.28901398181915",
              lon: "139.63455945253372",
              longitude: 139.63455945253372,
              lat: "35.30329406261444",
              latitude: 35.30329406261444,
              baseId: 11,
              sourceName: "横须和",
              discoveryTime: "2022-03-31T16:00:00.000+00:00",
            },
            {
              id: 14,
              name: "横须和",
              equipmentType: "",
              equipmentNo: "3",
              type: "",
              count: 1,
              source: "卫星图像分析系统",
              sourceDescript:
                "横须和发现quzhujian类型船4艘,经纬度分别是：139.63455945253372,35.30329406261444、139.6627226471901,35.299348533153534、139.66338247060776,35.2938312292099、139.66262876987457,35.28901398181915",
              lon: "139.63455945253372",
              longitude: 139.63455945253372,
              lat: "35.30329406261444",
              latitude: 35.30329406261444,
              baseId: 11,
              sourceName: "横须和",
              discoveryTime: "2022-03-31T16:00:00.000+00:00",
            },
          ],
        },
      ],
      /** 点详情 */
      pointDetailVisible: false,
      basePointsVisible: false,
      /** 显示点的属性或者编队 */
      formationListVisible: false,
      pointDetail: {
        type: "logbook", //opendata开源数据 logbook航行日志舰船  用这个字段判断轨迹的颜色

        typeChi: "运输机", //装备 类别
        iconUrl: "./../assets/imgs/navigation-log/blueship.png", //不同类型的装备 图标地址  用这个字段判断图标
        uuid: "AE4EED", //唯一标识
        name: "我是航行日志船",
        longitude: 123.0,
        latitude: 14.758531,
        time: "2023-06-21 16:47:37",
        detail: "用途", //描述和用途
        track: 0,
        attr: {
          速度: 10.75,
          国家码: "US",
          统一海上信用代码: 5,
        },
        timeline: [],
      },
      basePointDetail: {
        country: "日本",
        image: null,
        baseEquipmentList: [
          {
            id: 23,
            name: "",
            equipmentType: "",
            equipmentNo: "0",
            type: "",
            count: 1,
            source: "卫星图像分析系统",
            sourceDescript:
              "guandao19发现B-52类型飞行器1架,经纬度：144.92599056975774,13.583088916768768",
            lon: "144.92599056975774",
            longitude: 144.92599056975774,
            lat: "13.583088916768768",
            latitude: 13.583088916768768,
            baseId: 10,
            sourceName: "guandao19",
            discoveryTime: "2022-03-31T16:00:00.000+00:00",
          },
          {
            id: 24,
            name: "",
            equipmentType: "",
            equipmentNo: "0",
            type: "",
            count: 1,
            source: "卫星图像分析系统",
            sourceDescript:
              "chongsheng18发现B-52类型飞行器2架,经纬度分别是：127.75816024281393,26.359053306921584、127.76301842691113,26.358180879592588",
            lon: "127.75816024281393",
            longitude: 127.75816024281393,
            lat: "26.359053306921584",
            latitude: 26.359053306921584,
            baseId: 10,
            sourceName: "chongsheng18",
            discoveryTime: "2022-03-31T16:00:00.000+00:00",
          },
          {
            id: 25,
            name: "",
            equipmentType: "",
            equipmentNo: "1",
            type: "",
            count: 1,
            source: "卫星图像分析系统",
            sourceDescript:
              "chongsheng18发现B-52类型飞行器2架,经纬度分别是：127.75816024281393,26.359053306921584、127.76301842691113,26.358180879592588",
            lon: "127.75816024281393",
            longitude: 127.75816024281393,
            lat: "26.359053306921584",
            latitude: 26.359053306921584,
            baseId: 10,
            sourceName: "chongsheng18",
            discoveryTime: "2022-03-31T16:00:00.000+00:00",
          },
        ],
        latitude: 26.0,
        name: "冲绳基地",
        landArea: null,
        id: 10,
        type: "ABase",
        longitude: 127.0,
        directionAngle: null,
        height: null,
      },
      /** 编队列表 */
      formationList: [],
      currentFormationId: "",
      /** 是否展示预测按钮 */
      predictVisible: false,
      predictParamFormVisible: false,
      timeArr: null,
      // 底部时间轴
      timelineVisible: false,
      /**开源数据点的航海日志时间轴*/
      lookbooktimelineVisible: false,
      lookbooktimelineList: [
        {
          name: "boatssn794",
          id: 75,
          time: "2018-05-16",
          eventType: null,
          detail:
            "May 16, 2018 The keel was laid down for the future USS Montana during a ceremony at Newport News shipyard\n",
          region: null,
          type: null,
        },
        {
          name: "boatssn794",
          id: 76,
          time: "2023-07-18",
          eventType: null,
          detail:
            "September 12, 2020 The Pre-Commissioning Unit (PCU) Montana was christened during a 10 a.m. EDT ceremony at the Huntington Ingalls Industries (HII) Newport News Shipbuilding in Newport News, Virginia. Ms. Sarah M. R. Jewell, the former Secretary of the United States Department of Interior, served as sponsor of the ship. Cmdr. Michael F. Delaney is the prospective commanding officer\n",
          region: "Montana",
          type: null,
        },
        {
          name: "boatssn794",
          id: 77,
          time: "2023-10-05",
          eventType: null,
          detail:
            "October 5, The Montana was slowly and meticulously moved from the Module Outfitting Facility (MOF) Bay #1 to a floating dry-dock on Newport News shipyard",
          region: "Montana",
          type: null,
        },
        {
          name: "boatssn794",
          id: 222,
          time: "2020-10-05",
          eventType: null,
          detail:
            "October 5, The Montana was slowly and meticulously moved from the Module Outfitting Facility (MOF) Bay #1 to a floating dry-dock on Newport News shipyard",
          region: "Montana",
          type: null,
        },
        {
          name: "boatssn794",
          id: 32322,
          time: "2020-10-05",
          eventType: null,
          detail:
            "October 5, The Montana was slowly and meticulously moved from the Module Outfitting Facility (MOF) Bay #1 to a floating dry-dock on Newport News shipyard",
          region: "Montana",
          type: null,
        },
        {
          name: "boatssn794",
          id: 78,
          time: "2021-02-08",
          eventType: null,
          detail: " Launched on Feb. 8, 2021\n",
          region: null,
          type: null,
        },
        {
          name: "boatssn794",
          id: 79,
          time: "2021-07-16",
          eventType: null,
          detail:
            "July 16, Cmdr. Jon B. Quimby relieved Cmdr. Michael F. Delaney as CO of the SSN 794 during a change-of-command ceremony on Naval Station Norfolk\n",
          region: "Cmdr",
          type: null,
        },
        {
          name: "boatssn794",
          id: 80,
          time: "2022-02-04",
          eventType: null,
          detail:
            "February 4, 2022 PCU Montana moored at Pier 6 on Newport News Shpyard after a three-day underway for Builder's (Alpha) trials",
          region: null,
          type: null,
        },

        {
          name: "boatssn794",
          id: 97,
          time: "2022-12-21",
          eventType: null,
          detail:
            "December 21, USS Montana moored at Berth 5, Pier 3 on Naval Station Norfolk",
          region: null,
          type: null,
        },
        {
          name: "boatssn794",
          id: 98,
          time: "2023-01-18",
          eventType: null,
          detail:
            ' Moved ""dead-stick"" to Dry Dock #2 at Newport News Shipyard on Jan. 18, 2023."\n',
          region: null,
          type: null,
        },
      ],
      timelineList: [
        {
          id: 1,
          time: "2020-02-01",
          name: "p-8a",
          eventType: "事件类型",
          region: "南海",
          detail: "关于这个事件的一段描述",
          type: "穿航行峡",
        },
        {
          id: 2,
          time: "2020-02-02 19",
          name: "p-8a",
          eventType: "事件类型",
          region: "南海",
          detail: "关于这个事件的一段描述",
          type: "穿航行峡",
        },
        {
          id: 3,
          time: "2020-02-03 19:00",
          name: "p-8b",
          eventType: "事件类型",
          region: "南海",
          detail: "关于这个事件的一段描述",
          type: "穿航行峡",
        },
        {
          id: 4,
          time: "2020-02-02 19:00",
          name: "p-8a",
          eventType: "事件类型",
          region: "南海",
          detail: "关于这个事件的一段描述",
          type: "穿航行峡",
        },
        {
          id: 5,
          time: "2020-02-03 19:00",
          name: "p-8b",
          eventType: "事件类型",
          region: "南海",
          detail: "关于这个事件的一段描述",
          type: "穿航行峡",
        },
        {
          id: 6,
          time: "2020-02-02 19:00",
          name: "p-8a",
          eventType: "事件类型",
          region: "南海",
          detail: "关于这个事件的一段描述",
          type: "穿航行峡",
        },
        {
          id: 7,
          time: "2020-02-03 19:00",
          name: "p-8b",
          eventType: "事件类型",
          region: "南海",
          detail: "关于这个事件的一段描述",
          type: "穿航行峡",
        },
        {
          id: 8,
          time: "2020-02-02 19:00",
          name: "p-8a",
          eventType: "事件类型",
          region: "南海",
          detail: "关于这个事件的一段描述",
          type: "穿航行峡",
        },
        {
          id: 9,
          time: "2020-02-03 19:00",
          name: "p-8b",
          eventType: "事件类型",
          region: "南海",
          detail: "关于这个事件的一段描述",
          type: "穿航行峡",
        },
        {
          id: 10,
          time: "2020-02-02 19:00",
          name: "p-8a",
          eventType: "事件类型",
          region: "南海",
          detail: "关于这个事件的一段描述",
          type: "穿航行峡",
        },
        {
          id: 11,
          time: "2020-02-03 19:00",
          name: "p-8b",
          eventType: "事件类型",
          region: "南海",
          detail: "关于这个事件的一段描述",
          type: "穿航行峡",
        },
        {
          id: 12,
          time: "2020-02-02 19:00",
          name: "p-8a",
          eventType: "事件类型",
          region: "南海",
          detail: "关于这个事件的一段描述",
          type: "穿航行峡",
        },
        {
          id: 13,
          time: "2020-02-03 19:00",
          name: "p-8b",
          eventType: "事件类型",
          region: "南海",
          detail: "关于这个事件的一段描述",
          type: "穿航行峡",
        },
      ],
      // 预测船舶点
      /** 船舶编队轨迹 */
      formationflightData: [],
      // 控制元素显隐
      equipTableVisible: false,
      equipDetaiVisible: false,
      /** 轨迹点详情 */
      pointbgVisible: false,
      linepointDetailVisible: false,
      linepointDetail: {
        longitude: 127.90618166668,
        latitude: 26.561033333,
        time: "2023-06-22 16:47:37",
        detail: "一段描述",
      },
      handler: null,
      redDataEntities: [],
      isActive: true,
      /** 航海日志 */
      logBookVisible: false,
      /** 轨迹 */
      trackVisible: false,
      saveGByUuid: {}, //根据uuid保存
      isDragging: false,
      startX: 0,
      startScrollLeft: 0,
      isDrag: true
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      this.getBaseData();
      this.getList();
      this.initScreenClick();
      if (viewer && viewer.timeline && viewer.timeline.container.style) {
        viewer.timeline.container.style.visibility = "hidden"; // 不显示时间轴控件
        viewer.animation.container.style.visibility = "hidden"; // 不显示时间轴前面的动画控件
      }
      this.drawMap = new DrawMap();
    });

    // this.loadPoints()
  },
  methods: {
    /** 加载字体 */
    getBaseData() {
      let _self = this;
      request.treeselect().then(function (res) {
        _self.treeData = res.data.data;
        // 设置默认数据 checkIds
        const expandedArr = _self.treeData.filter((item) => {
          return ["船舰", "飞机器"].includes(item.label);
        });
        _self.expandedIds = expandedArr.map((item) => {
          return item.id;
        });
      });
    },
    /** 查询数据 */
    getList() {
      viewer.entities.removeAll();
      this.pointDetailVisible = false;
      this.timelineVisible = false;
      this.linepointDetailVisible = false;
      this.formationListVisible = false;
      this.lookbooktimelineVisible = false;
      this.formParams.catalogIds = this.$refs.paramTree.getCheckedKeys();
      console.log(this.formParams.catalogIds);
      if (this.formParams.catalogIds.length > 0) {
        let _self = this;
        this.loading = true;
        request.queryGisData(this.formParams).then(function (res) {
          // let res = {data: this.pointData}
          _self.loading = false;
          if (res.data.trackPoints) {
            _self.pointData = res.data.trackPoints;
            _self.basePointsData = res.data.militaryBases;
            _self.loadPoints();
          } else {
            _self.$message.error("暂无装备信息");
          }
        });
      } else {
        this.$message.error("请先选择要查询的类别");
      }

      // let res = {data: this.pointData}
    },
    // 绘制数据
    drawData(data) {
      this.loadPagePoint();
      const imgObj = {
        whiteCircle,
        blueShip,
      };
      this.drawMap.drawPointAndLine(data.path_list, imgObj);
      this.drawMap.drawCircle([data.area]);
    },
    // 绘制所有区域
    drawArea() {
      this.drawAreaLoading = true;
      this.loadPagePoint();
      request
        .areaShow()
        .then((res) => {
          const data = res.data;
          this.drawMap.drawCircle(data.area);
        })
        .finally(() => {
          this.drawAreaLoading = false;
        });
    },
    /** 清空树参数 */
    clearTree() {
      this.$refs.paramTree.setCheckedKeys([]);
    },
    /** 地图点击事件--判断数据类型 */
    initScreenClick() {
      let _self = this;
      this.handler.setInputAction(function (e) {
        console.log("点击事件");
        console.log("=========");
        console.log(e);
        // debugger;
        _self.removeTargets("背景圆圈");
        let currentTarget = viewer.scene.pick(e.position);
        if (
          viewer.scene.pickPositionSupported &&
          Cesium.defined(currentTarget) &&
          currentTarget.id
        ) {
          _self.showPointBg(
            currentTarget.id.attribute.detail.longitude,
            currentTarget.id.attribute.detail.latitude
          );
          _self.formationListVisible = false;
          _self.basePointsVisible = false;
          if (currentTarget.id.name == "航迹坐标点") {
            _self.linepointDetail = currentTarget.id.attribute.detail;
            _self.linepointDetailVisible = true;
            _self.$nextTick(function () {
              let element = _self.$refs.lineDetail;
              element.style.top = e.position.y + 10 + "px";
              element.style.left = e.position.x + 10 + "px";
            });
            /*当前有航海日志时间轴显示时*/
            if (_self.lookbooktimelineVisible == true) {
              let keyword = currentTarget.id.attribute.detail.time.substr(
                0,
                10
              );
              if (document.getElementById(keyword) != null) {
                document.getElementById(keyword).scrollIntoView();
              }
            }
          } else if (currentTarget.id.name == "开源数据点") {
            _self.logBookVisible = false,
            _self.trackVisible = false,
            _self.lookbooktimelineVisible = false;
            _self.pointDetailVisible = true;
            _self.timelineVisible = false;
            _self.pointDetail = currentTarget.id.attribute.detail;
          } else if (currentTarget.id.name == "航行日志点") {
            _self.logBookVisible = false,
            _self.trackVisible = false,
            _self.lookbooktimelineVisible = false;
            _self.pointDetailVisible = true;
            _self.pointDetail = currentTarget.id.attribute.detail;
            _self.showPointBg(
              currentTarget.id.attribute.detail.longitude,
              currentTarget.id.attribute.detail.latitude
            );
            let param = {
              type: _self.pointDetail.type,
              uuid: _self.pointDetail.uuid, //唯一标识
              typeChi: _self.pointDetail.typeChi,
            };
            /** 请求航行日志信息的接口 */
            _self.loading = true;
            request.queryLogbookTimeline(param).then(function (res) {
              let data = res.data;
              _self.timelineList = data.timelinedata;
              _self.timelineVisible = true;
              _self.loading = false;
              if (data.flightData) {
                _self.showBooklogLine(data.flightData);
              } else {
                _self.$message.error("暂无该装备轨迹信息");
                _self.loading = false;
              }
            });
          } else if (currentTarget.id.name == "基地点") {
            _self.pointDetailVisible = false;
            _self.timelineVisible = false;
            _self.linepointDetailVisible = false;
            _self.lookbooktimelineVisible = false;
            _self.basePointDetail = currentTarget.id.attribute.detail;
            _self.basePointsVisible = true;
          }
        } else {
          _self.linepointDetail = {};
          // _self.timelineVisible = false;
          _self.linepointDetailVisible = false;
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    loadPagePoint() {
      viewer.entities.removeAll();
      this.loadPoints();
    },
    /** 加载所有点 */
    loadPoints() {
      /** 加载装备点 */
      let data = this.pointData;
      for (let i = 0; i < data.length; i++) {
        let iconimg,
          pointName = null;
        if (data[i].type == "opendata" && data[i].categories == "aircraft") {
          pointName = "开源数据点";
          iconimg = blueAircraft;
        } else if (data[i].type == "opendata" && data[i].categories == "ship") {
          pointName = "开源数据点";
          iconimg = blueShip;
        } else if (data[i].type == "logbook") {
          pointName = "航行日志点";
          iconimg = yellowShip;
        }
        viewer.entities.add({
          name: pointName,
          position: Cesium.Cartesian3.fromDegrees(
            data[i].longitude,
            data[i].latitude
          ),
          billboard: {
            //图标
            image: iconimg,
            width: 29,
            height: 29,
            rotation: data[i].track,
          },
          attribute: {
            detail: data[i],
          },
        });
      }
      /** 加载基地点 */
      for (let i = 0; i < this.basePointsData.length; i++) {
        viewer.entities.add({
          name: "基地点",
          position: Cesium.Cartesian3.fromDegrees(
            this.basePointsData[i].longitude,
            this.basePointsData[i].latitude
          ),
          billboard: {
            image: jidi,
            width: 22,
            height: 22,
          },
          attribute: {
            detail: this.basePointsData[i],
          },
        });
      }
    },
    showTrack(type, uuid, categories, flightLine) {
      if (this.trackVisible) {
        this.showSingleLine(type, uuid, categories, flightLine);
      } else {
        if (this.saveGByUuid[uuid] && this.saveGByUuid[uuid].length > 0) {
          for (const item of this.saveGByUuid[uuid]) {
            viewer.entities.remove(item);
          }
          this.saveGByUuid[uuid] = [];
        }
      }
    },
    /** 绘制船舶航迹--单条轨迹 脉络线 */
    showSingleLine(type, uuid, categories, flightLine) {
      this.saveGByUuid[uuid] = [];
      let param = {
        type: type,
        uuid: uuid, //唯一标识
        categories: categories,
        flightLine: flightLine,
      };
      // let param = {"uuid":"368776000","type":"opendata","categories":"ship"}
      let imgUrl;
      if (categories == "aircraft") {
        imgUrl = blueAircraft;
      } else if (categories == "ship") {
        imgUrl = blueShip;
      }
      let _self = this;
      _self.loading = true;
      /** 请求接口 查询轨迹段的信息 */
      request.querySegmentedTracks(param).then(function (res) {
        if (res.data.pointList) {
          let pointList = res.data.pointList;
          viewer.entities.removeAll();
          let detail = res.data;
          delete detail.pointList;
          for (let i = 0; i < pointList.length - 1; i++) {
            const point = viewer.entities.add({
              name: "航迹坐标点",
              position: Cesium.Cartesian3.fromDegrees(
                pointList[i].longitude,
                pointList[i].latitude
              ),
              billboard: {
                //图标
                image: whiteCircle,
                width: 10,
                height: 10,
              },
              attribute: {
                detail: pointList[i],
              },
            });
            if (_self.trackVisible) _self.saveGByUuid[uuid].push(point);
            const line = viewer.entities.add({
              name: "航迹线",
              polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray([
                  pointList[i].longitude,
                  pointList[i].latitude,
                  pointList[i + 1].longitude,
                  pointList[i + 1].latitude,
                ]),
                arcType: Cesium.ArcType.RHUMB,
                width: 8,
                material: new Cesium.PolylineArrowMaterialProperty(
                  Cesium.Color.fromCssColorString("#888888")
                ),
              },
              attribute: {
                id: pointList[i],
              },
            });
            if (_self.trackVisible) _self.saveGByUuid[uuid].push(line);
          }
          const _point = viewer.entities.add({
            name: "开源数据点",
            position: Cesium.Cartesian3.fromDegrees(
              pointList[pointList.length - 1].longitude,
              pointList[pointList.length - 1].latitude
            ),
            billboard: {
              //图标
              image: imgUrl,
              width: 29,
              height: 29,
              rotation: pointList[pointList.length - 1].track,
            },
            attribute: {
              detail: detail,
            },
          });
          if (_self.trackVisible) _self.saveGByUuid[uuid].push(_point);
          _self.loading = false;
        } else {
          _self.$message.error("暂无轨迹信息");
          _self.loading = false;
        }
      });
    },
    /** 展示开源数据点的航行日志 */
    showlogbook(uuid) {
      if (this.logBookVisible) {
        let param = {
          uuid: uuid,
        };
        // let param = {"uuid":"368776000","type":"opendata","categories":"ship"}
        let _self = this;
        if (this.lookbooktimelineVisible == true) {
          this.lookbooktimelineVisible = false;
        } else {
          request
            .queryLogbookTimelineByShipTrackUuid(param)
            .then(function (res) {
              if (res.data.data.timelinedata) {
                _self.lookbooktimelineList = res.data.data.timelinedata;
                _self.lookbooktimelineVisible = true;
              } else {
                _self.$message.error("暂无该装备航海日志信息");
              }
            });
        }
      } else {
        this.lookbooktimelineVisible = false;
      }
    },
    /** 点击航行日志 跳转到轨迹  同一日期的点显示红色*/
    showRedlookbookLine(time) {
      if(!this.isDrag) return
      this.removeRedTargets();
      let pointList = this.getTimeTargets(time);
      console.log(pointList, "pointList");
      for (let i = 0; i < pointList.length; i++) {
        viewer.entities.add({
          name: "航迹坐标点",
          position: Cesium.Cartesian3.fromDegrees(
            pointList[i].longitude,
            pointList[i].latitude
          ),
          billboard: {
            //图标
            image: redCircle,
            width: 15,
            height: 15,
          },
          attribute: {
            detail: pointList[i],
            type: "redEntity",
          },
        });
        viewer.entities.add({
          name: "航迹线",
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray([
              pointList[i].longitude,
              pointList[i].latitude,
              pointList[i + 1].longitude,
              pointList[i + 1].latitude,
            ]),
            arcType: Cesium.ArcType.RHUMB,
            width: 8,
            material: new Cesium.PolylineArrowMaterialProperty(
              Cesium.Color.fromCssColorString("#df3030")
            ),
          },
          attribute: {
            type: "redEntity",
          },
        });
      }
    },
    /** 绘制航行日志轨迹线 */
    showBooklogLine(data) {
      /** 请求接口 查询轨迹段的信息 */
      viewer.entities.removeAll();
      let lineData = [];
      let pointList = data.pointList;
      for (let i = 0; i < pointList.length; i++) {
        lineData.push(pointList[i].longitude);
        lineData.push(pointList[i].latitude);
      }
      for (let i = 1; i < pointList.length - 1; i++) {
        viewer.entities.add({
          name: "航迹坐标点",
          position: Cesium.Cartesian3.fromDegrees(
            pointList[i].longitude,
            pointList[i].latitude
          ),
          billboard: {
            //图标
            image: whiteCircle,
            width: 10,
            height: 10,
          },
          attribute: {
            /*text: flight[i].detail.time + '\n' + flight[i].detail.name + '\n' + flight[i].detail.type + '\n' + flight[i].detail.region + '\n' + flight[i].detail.detail*/
            detail: pointList[i],
          },
        });
        viewer.entities.add({
          name: "航迹线",
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray([
              pointList[i].longitude,
              pointList[i].latitude,
              pointList[i + 1].longitude,
              pointList[i + 1].latitude,
            ]),
            arcType: Cesium.ArcType.RHUMB,
            width: 8,
            material: new Cesium.PolylineArrowMaterialProperty(
              Cesium.Color.fromCssColorString("#888888")
            ),
          },
          attribute: {
            id: data[i],
          },
        });
      }
      viewer.entities.add({
        name: "航行日志点",
        position: Cesium.Cartesian3.fromDegrees(
          pointList[pointList.length - 1].longitude,
          pointList[pointList.length - 1].latitude
        ),
        billboard: {
          //图标
          image: yellowShip,
          width: 29,
          height: 29,
          rotation: pointList[pointList.length - 1].track,
        },
        attribute: {
          detail: pointList[pointList.length - 1],
        },
      });
      console.log(data);
    },
    /** 绘制预测轨迹线*/
    handlePredict(type, uuid, categories, flightLine) {
      let param = {
        type: type,
        uuid: uuid, //唯一标识
        categories: categories,
        flightLine: flightLine,
      };
      let _self = this;
      this.loading = true;
      this.showSingleLine(type, uuid, categories, flightLine);
      request.modelPredict(param).then(function (res) {
        let flight = res.data.pointList;
        let lineData = [];
        for (let i = 0; i < flight.length; i++) {
          lineData.push(flight[i].longitude);
          lineData.push(flight[i].latitude);
        }
        for (let i = 0; i < flight.length - 1; i++) {
          viewer.entities.add({
            name: "航迹坐标点",
            position: Cesium.Cartesian3.fromDegrees(
              flight[i].longitude,
              flight[i].latitude
            ),
            billboard: {
              //图标
              image: yellowCircle,
              width: 10,
              height: 10,
            },
            attribute: {
              detail: flight[i],
            },
          });
        }
        viewer.entities.add({
          name: "航迹线",
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray(lineData),
            width: 1,
            arcType: Cesium.ArcType.RHUMB,
            material: new Cesium.PolylineDashMaterialProperty({
              color: Cesium.Color.fromCssColorString("#fffe4e"),
            }),
            clampToGround: true,
          },
        });
        viewer.entities.add({
          name: "预测终点",
          position: Cesium.Cartesian3.fromDegrees(
            flight[flight.length - 1].longitude,
            flight[flight.length - 1].latitude
          ),
          billboard: {
            //图标
            image: predictship,
            width: 29,
            height: 29,
            rotation: flight[flight.length - 1].track,
          },
        });
        /*viewer.entities.add({
                        name: "预测起点",
                        position: Cesium.Cartesian3.fromDegrees(flight[0].longitude, flight[0].latitude),
                        billboard: {
                            //图标
                            image: blueShip,
                            width: 29,
                            height: 15,
                            rotation: flight[0].track,
                        },
                    });*/
        _self.loading = false;
      });
    },
    /** 绘制点击的点的背景圆*/
    showPointBg(lng, lat) {
      viewer.entities.add({
        name: "背景圆圈",
        position: Cesium.Cartesian3.fromDegrees(lng, lat),
        billboard: {
          //图标
          image: pointBg,
          width: 30,
          height: 30,
        },
      });
    },
    /** 关闭点详情 恢复点*/
    closepointDetail() {
      viewer.entities.removeAll();
      this.pointDetailVisible = false;
      this.loadPoints();
      this.logBookVisible = false;
      this.trackVisible = false;
      this.lookbooktimelineVisible = false;
    },
    /** 显示编队列表 */
    showFormation(uuid) {
      let param = {
        uuid: uuid,
      };
      let _self = this;
      this.loading = true;
      request.queryFormation(param).then(function (res) {
        _self.pointDetailVisible = false;
        _self.formationListVisible = true;
        if (res.data.data.shipList) {
          _self.formationList = res.data.data.shipList;
          _self.currentFormationId = res.data.data.formationId;
          viewer.entities.removeAll();
          /** 展示编队轨迹 */
          let data = res.data.data.dataList;
          for (let i = 0; i < data.length; i++) {
            let flight = data[i].pointList;
            let lineData = [];
            for (let i = 0; i < flight.length; i++) {
              lineData.push(flight[i].longitude);
              lineData.push(flight[i].latitude);
            }
            for (let i = 1; i < flight.length - 1; i++) {
              viewer.entities.add({
                name: "航迹坐标点",
                position: Cesium.Cartesian3.fromDegrees(
                  flight[i].longitude,
                  flight[i].latitude
                ),
                billboard: {
                  //图标
                  image: whiteCircle,
                  width: 10,
                  height: 10,
                },
                attribute: {
                  /*text: flight[i].detail.time + '\n' + flight[i].detail.name + '\n' + flight[i].detail.type + '\n' + flight[i].detail.region + '\n' + flight[i].detail.detail*/
                  detail: flight[i],
                },
              });
              viewer.entities.add({
                name: "航迹线",
                polyline: {
                  positions: Cesium.Cartesian3.fromDegreesArray([
                    flight[i].longitude,
                    flight[i].latitude,
                    flight[i + 1].longitude,
                    flight[i + 1].latitude,
                  ]),
                  arcType: Cesium.ArcType.RHUMB,
                  width: 8,
                  material: new Cesium.PolylineArrowMaterialProperty(
                    Cesium.Color.fromCssColorString("#888888")
                  ),
                },
              });
            }
            viewer.entities.add({
              name: "开源数据点",
              position: Cesium.Cartesian3.fromDegrees(
                flight[flight.length - 1].longitude,
                flight[flight.length - 1].latitude
              ),
              billboard: {
                //图标
                image: yellowShip,
                width: 29,
                height: 29,
                rotation: flight[flight.length - 1].track,
              },
              attribute: {
                details: data[i],
              },
            });
          }
          _self.loading = false;
        } else {
          _self.$message.error("无编队信息");
        }
      });
    },
    /** 返回装备详情页*/
    formationBacktoPoint() {
      this.pointDetailVisible = true;
      this.formationListVisible = false;
    },
    /** 显示编队轨迹 */
    showFormationLine(item) {},

    /** 根据id获取目标实体 */
    getTargets(choosename) {
      var targets = [];
      var entities = viewer.entities.values;
      for (let i = 0; i < entities.length; i++) {
        var name = entities[i]._name;
        if (name != undefined) {
          if (name == choosename) {
            targets.push(entities[i]);
          }
        }
      }
      return targets;
    },
    /** 航行日志点对应轨迹 --匹配日期*/
    getTimeTargets(time) {
      var points = [];
      var entities = viewer.entities.values;
      for (let i = 0; i < entities.length; i++) {
        if (entities[i]._name && entities[i]._name == "航迹坐标点") {
          let targettime = entities[i].attribute.detail.time.substr(0, 10);
          if (targettime != undefined) {
            if (time == targettime) {
              points.push(entities[i].attribute.detail);
            }
          }
        }
      }
      return points;
    },
    /** 清除目标实体 */
    removeTargets(name) {
      let entities = this.getTargets(name);
      for (let i = 0; i < entities.length; i++) {
        viewer.entities.remove(entities[i]);
      }
    },
    /** 清除航海日志关联点实体 红色点线 */
    getRedTargets() {
      var targets = [];
      var entities = viewer.entities.values;
      for (let i = 0; i < entities.length; i++) {
        if (
          entities[i]._name &&
          entities[i]._attribute &&
          entities[i]._attribute.type == "redEntity"
        ) {
          targets.push(entities[i]);
        }
      }
      return targets;
    },
    /** 清除红色点线 */
    removeRedTargets() {
      let entities = this.getRedTargets();
      for (let i = 0; i < entities.length; i++) {
        viewer.entities.remove(entities[i]);
      }
    },
    gotoGanttChart() {
      window.open("../gantt-chart.html");
    },
    /** 左侧筛选是否显示 */
    filtrateBtn() {
      this.isActive = !this.isActive;
    },
    startDrag(event) {
      this.isDragging = true;
      this.startX = event.clientX;
      this.startScrollLeft = this.$refs.lookbookRef.scrollLeft;

      document.addEventListener('mousemove', this.drag);
      document.addEventListener('mouseup', this.endDrag);
    },
    drag(event) {
      if (!this.isDragging) return;
      const delta = this.startX - event.clientX;
      this.$refs.lookbookRef.scrollLeft = this.startScrollLeft + delta;
      if(delta) this.isDrag = false
    },
    endDrag() {
      setTimeout(()=>{
        this.isDrag = true
      }, 0)
      this.isDragging = false;
      document.removeEventListener('mousemove', this.drag);
      document.removeEventListener('mouseup', this.endDrag);
    },
  },
};
</script>

<style lang="scss" scoped>
$item-bg-color: rgba(0, 78, 126, 0.8);
$item-bg-color2: #5b82bc;
$text-color: #ffffff;

/* 大标题 */
.params-title {
  background: #5b82bc;
  color: #fff;
  text-align: left;
  text-wrap: nowrap;
  position: relative;
  padding: 10px 0px 10px 35px;
  background: url("../assets/imgs/navigation-log/filter-background.png")
    no-repeat;
  background-size: 100% 100%;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 27%;
    width: 20px;
    height: 20px;
    background: url("../assets/imgs/navigation-log/filtrate.png") no-repeat;
    background-size: 100% 100%;
  }
  .el-icon-close {
    cursor: pointer;
    position: absolute;
    float: right;
    right: 10px;
    top: 35%;
  }
}

/* 小标题 */
.text-title {
  text-align: left;
  font-size: 14px;
  position: relative;
  padding-left: 8px;
  &:before {
    top: 4px;
    left: 0px;
    position: absolute;
    display: block;
    width: 2px;
    height: 12px;
    background: #409eff;
    content: "";
  }
}
/* 间距 */
.space-item {
  margin: 16px 0px;
}
/* 左侧参数树*/
.params-tree {
  position: absolute;
  display: flex;
  flex-direction: column;
  height: calc(100% - 25px);
  width: 280px;
  top: 10px;
  left: 10px;
  cursor: default;
  background: #0f2445;
  opacity: 0.88;
  border: 1.4px solid rgba(59, 101, 128, 0.72);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  transition: all 0.2s;
  /* 中间树*/
  .el-tree {
    height: calc(100% - 100px);
    background: #0f2445;
    color: #fff;
    padding: 10px 0px;
    overflow: auto;
    ::v-deep .el-tree-node__content {
      height: 40px;
      padding-left: 20px !important;
    }
    ::v-deep .el-tree-node:focus > .el-tree-node__content,
    ::v-deep .el-tree-node__content:hover,
    .el-upload-list__item:hover {
      background-color: #409eff;
    }
  }
  /* 底部确定取消*/
  .param-bottom-btn {
    position: absolute;
    bottom: 0px;
    display: flex;
    height: 38px;
    width: 100%;
    line-height: 38px;
    text-align: center;
    font-size: 14px;
    .btn-comfirm {
      flex: 1;
      color: #ffffff;
      background: rgba(0, 129, 207, 0.5);
      &:hover {
        background: rgba(0, 129, 207, 0.7);
      }
    }
    .btn-cancer {
      border-top: 1.4px solid rgba(59, 101, 128, 0.72);
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
      box-sizing: border-box;
      flex: 1;
      color: rgba(255, 255, 255, 0.65);
      &:hover {
        color: rgba(255, 255, 255);
      }
    }
  }

  /* 折叠按钮 */
  .btn-visible {
    position: absolute;
    width: 20px;
    height: 80px;
    background: url("../assets/imgs/navigation-log/fold.png") no-repeat;
    background-size: 100% 100%;
    top: 45%;
    right: -20px;
    cursor: pointer;
  }
  .btn-visible.active {
    background: url("../assets/imgs/navigation-log/unfold.png") no-repeat;
    background-size: 100% 100%;
  }
}
.params-tree.active {
  left: -280px;
}
/* 右上方筛选*/
.params-form {
  position: absolute;
  // right: 20px;
  right: 10px;
  top: 10px;
  ::v-deep .el-form-item__label {
    color: rgba(255, 255, 255, 0.85);
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 135px;
  }
  ::v-deep .el-input__icon {
    color: #1f97e0;
  }
  ::v-deep .el-input__inner {
    line-height: 38px;
    height: 38px;
    background: rgba(27, 44, 77, 0.88);
    border: 1.4px solid rgba(59, 101, 128, 0.48);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.65);
  }
  .el-button--small {
    font-size: 14px;
    padding: 9px 30px;
  }
}
/* 右侧详情*/
.point-detail {
  text-align: left;
  position: absolute;
  background: #0f2445;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: calc(100% - 74px);
  opacity: 0.88;
  width: 300px;
  top: 60px;
  right: 10px;
  border: 1.4px solid rgba(59, 101, 128, 0.72);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  transition: all 0.2s;

  .point-detail-container {
    padding: 20px 20px 0px 20px;
    height: 100%;
    overflow: auto;
    .point-name {
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .point-line {
      margin-bottom: 16px;
      height: 1px;
      background: #409eff;
      position: relative;
      &:before {
        position: absolute;
        display: block;
        width: 14px;
        height: 2px;
        background: #409eff;
        content: "";
        top: -1px;
      }
      &:after {
        position: absolute;
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #409eff;
        content: "";
        right: 0px;
        top: -1px;
      }
    }
  }
  /* 操作框*/
  .operation-btn {
    position: absolute;
    left: -162px;
    width: 156px;
    height: 120px;
    background: rgba(27, 44, 77, 0.88);
    border: 1.4px solid rgba(59, 101, 128, 0.48);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    font-size: 14px;
    .operation-item {
      margin: 18px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    ::v-deep .el-switch__core {
      width: 28px !important;
      height: 16px;
    }
    ::v-deep .el-switch__core::after {
      width: 12px;
      height: 12px;
    }
    ::v-deep .el-switch.is-checked .el-switch__core::after {
      margin-left: -15px;
    }
  }
  /* 可点击文字按钮 */
  .detail-text-btn {
    color: #409eff;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-align: right;
  }
  .detail-text-btn:hover,
  .detail-text-btn:focus {
    cursor: pointer;
    background: none;
    color: #48d6ff;
  }
  .point-bottom {
    height: calc(100% - 120px);
    ::v-deep .el-descriptions__body {
      color: #fff;
      background-color: transparent;
    }

    ::v-deep .el-descriptions-item__label.is-bordered-label {
      width: 88px;
      background: rgba(25, 113, 139, 0.27);
      color: rgba(255, 255, 255, 0.8);
    }

    ::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
      border: none;
      border-top: 1px solid #08495e;
      border-bottom: 1px solid #08495e;
    }
  }
  /*时间线*/
  .point-detail-timeline {
    margin-top: 20px;

    .point-detail-timeline-item {
      display: flex;
      flex-wrap: wrap;
      -ms-flex-line-pack: justify;
      align-content: space-between;
      flex-direction: column;
      padding-left: 10px;
      border-left: 1px dashed #008de2;

      .detail-flex {
        width: 100%;
        margin-top: -12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        font-size: 14px;
      }
      /*绘制圆*/
      .circle {
        width: 10px;
        height: 10px;
        float: right;
        margin-left: -15px;
        background-color: #008de2;
        border-radius: 50%;
        position: relative;
        &:before {
          content: "";
          position: absolute;
          top: 1px;
          left: 1px;
          width: 8px;
          height: 8px;
          background-color: #0f2445;
          border-radius: 50%;
          z-index: 1;
        }
        &:after {
          content: "";
          position: absolute;
          top: 2px;
          left: 2px;
          width: 6px;
          height: 6px;
          background-color: #008de2;
          border-radius: 50%;
          z-index: 1;
        }
      }
    }
  }
  /*看编队信息*/
  .formation-list {
    display: flex;
    flex-direction: column;

    .formation-item {
      margin: 8px;

      .formation-item-title {
        margin: 0;
        font-size: 12px;
        font-weight: bold;
      }

      span {
        font-size: 12px;
      }
    }
  }
}
.point-detail.active {
  right: -560px;
}

.lookbook {
  padding-left: 20px;
  position: absolute;
  left: 300px;
  right: 320px;
  bottom: 14px;
  height: 230px;
  color: #fff;
  background: rgba(27, 44, 77, 0.88);
  border: 1.4px solid rgba(59, 101, 128, 0.72);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  transition: all 0.2s;
  cursor: pointer;
  .lookbook-timeline {
    display: flex;
    gap: 12px;
    width: 100%;
    overflow: auto;
    padding-bottom: 10px;
    .lookbook-item {
      width: 290px;
      height: 155px;
      min-width: 290px;
      max-height: 155px;
      background: url("./../assets/imgs/navigation-log/time-frame.png")
        no-repeat;
      background-size: 100% 100%;
      text-align: left;
      margin-left: 24px;
      position: relative;
      &:before {
        content: "";
        position: absolute;
        width: 24px;
        height: 155px;
        background: url("./../assets/imgs/navigation-log/timer-shaft.png")
          no-repeat;
        background-size: 100% 100%;
        top: 5px;
        left: -22px;
      }
      .lookbook-title {
        height: 33px;
        line-height: 33px;
        padding-left: 12px;
      }
      .lookbook-content {
        padding: 12px 12px 0px 12px;
        height: calc(100% - 46px);
        overflow: auto;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.85);

        ::v-deep .el-descriptions__body {
          color: rgba(255, 255, 255, 0.65);
          background-color: transparent;
        }
        ::v-deep
          .el-descriptions-item__container
          .el-descriptions-item__content {
          color: #ffffff;
        }
      }
    }
  }
}
.lookbook.active {
  bottom: -300px;
}

.timeline {
  position: absolute;
  bottom: 20px;
  width: 100%;
  overflow: auto;
  color: #fff;
  padding-bottom: 5px;
  /* .el-timeline {
             display: flex;
             .el-timeline-item__node--normal {
                 bottom: 1px;
                 background: #1D498B;
             }
             .el-timeline-item__tail {
                 position: absolute;
                 bottom: 4px;
                 width: 100%;
                 border-bottom: 5px dashed #1D498B;
             }
         }*/
  .circle {
    position: absolute;
    bottom: 0px;
    width: 10px;
    height: 10px;
    background-color: #008de2;
    border-radius: 50%;
  }

  .timeline-item {
    display: flex;
    -ms-flex-line-pack: justify;
    align-content: space-between;
    flex-direction: column;
    padding-left: 10px;
    border-bottom: 1px dashed #008de2;
    min-width: 200px;
    max-height: 200px;
    overflow: auto;

    p {
      padding: 2px 0;
      margin: 0;
      text-align: left;
      font-size: 14px;
    }

    .p-title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #fff3e9;
      background: url("./../assets/imgs/navigation-log/shijianzhou_bg.png");
      background-size: 100% 100%;
    }
  }
}

.linepoint-detais {
  position: absolute;
  height: 100px;
  width: 200px;
  // max-height: 290px;
  // max-width: 200px;
  text-align: left;
  background: url("./../assets/imgs/navigation-log/time-frame.png") no-repeat;
  background-size: 100% 100%;
  color: rgba(255, 255, 255, 0.85);
  .linepoint-content {
    height: calc(100% - 40px);
    overflow: auto;
    padding: 8px;
    .linepoint-body {
      font-size: 12px;
    }
    ::v-deep .el-descriptions__body {
      color: rgba(255, 255, 255, 0.65);
      background-color: transparent;
    }
    ::v-deep .el-descriptions-item__label:not(.is-bordered-label) {
      font-size: 12px;
    }
    ::v-deep .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
      padding-bottom: 0px;
    }
    ::v-deep .el-descriptions-item__container .el-descriptions-item__content {
      font-size: 12px;
      color: #ffffff;
    }
  }
  .linepoint-title {
    height: 24px;
    line-height: 24px;
    padding-left: 8px;
    font-size: 12px;
  }

  p {
    padding: 2px 0;
    margin: 0;
    text-align: left;
    font-size: 12px;
  }
}

/* 定义滚动条样式 */
::-webkit-scrollbar {
  width: 5px;
  height: 6px;
  background-color: #fff;
}

// /*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.8);
  background: $item-bg-color;
}

// /*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.8);
  background-color: #33b2ff;
  border-radius: 4px;
}

.el-form-item__content,
.el-input__inner {
  line-height: 32px;
  height: 32px;
}

.el-button--small {
  padding: 9px 35px;
}
</style>

